<script setup>
// import { RouterLink, RouterView} from 'vue-router'
// import HelloWorld from './components/HelloWorld.vue'
// import request from './axios/request.js'
import {reactive} from 'vue'
import request from './axios/request.js'
const bookData=reactive({//通过reactive()方法设置list数组为响应式数据
  list:[]
})
//使用Axios请求数据
const getData=function(){
  request({
    url:'/mock/getBooks',//请求url路径
    method:'get'//请求方式
  }).then(res=>{
    bookData.list=res.data.data //通过res.data.data获取服务器响应的数据并赋值给bookData.list
    console.log(res.data.data)
  }).catch(error=>{
    console.log(error)
  });
  
}
</script>

<template>
  <!-- <header>
    

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header> -->

  <!-- <RouterView /> -->
  <div class="box">
	  <button @click="getData">请求数据</button>
	  <table class="table" width="90%">
		  <caption>
			  <h2>图书列表</h2>
		  </caption>
		  <thead>
			  <tr>
				  <th>编号</th>
				  <th>书号</th>
				  <th>作者</th>
			  </tr>
			  
		  </thead>
		 <tbody v-for="item in bookData.list" :key="item.id">
			  <tr>
				  <td>{{item.id}}</td>
				  <td>{{item.name}}</td>
				  <td>{{item.author}}</td>
			  </tr>
		  </tbody>
	  </table>
  </div>
</template>

<style scoped>
body, html {
  width: 100%;
  height: 100%;
}
#app {
  width: 100% !important;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
}
table td, table th {
  border: 1px solid lightblue;
  color: #666;
  height: 30px;
}
table thead th {
  background-color: skyblue;
  width: 100px;
}
table tr:nth-child(odd) {
  background: #fff;
}
table tr:nth-child(even) {
  background: #F5FAFA;
}
</style>
